<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/jsp/hadmin/addHeader.jsp"%>
<link href="${ctx }/h/css/plugins/steps/jquery.steps.css"
	rel="stylesheet">
<script src="${ctx}/js/jQuery.md5.js" type="text/javascript"></script>
<script type="text/javascript">
	var formUrl = "";
	var validateConfig = {
		rules : {
			nickName : {
				required : true
			}
		},
		messages : {
			nickName : {
				required : "请输入用户名"
			},
			email : "请输入正确的E-mail地址"
		}
	};
</script>
<style type="text/css">
#form .content {
	height: 440px;
}

#form select {
	margin-top: 0;
}
</style>
<!-- 添加日期选择器js -->
<script src="./h/js/plugins/layer/laydate/laydate.js"></script>
<!-- 添加日期选择器js结束 -->
<!-- 选择框css样式 -->
<link href="./h/css/plugins/iCheck/custom.css" rel="stylesheet">

</head>
<body class="gray-bg">
	<div class="row wrapper border-bottom white-bg page-heading"
		style="padding-left: 100px; padding-right: 100px;">
		<div style="width:100%;height:80px;border-bottom:1px solid #ddd;padding:20px 0;"><img src="./images/login/images/logo.png" /></div>
		<div class="col-sm-12" style="margin: 0 auto;">
			<h2 style="text-align: center;">
				<st:config key="site.name"></st:config>
				账号注册
			</h2>

			<form action="./system/setting/register/formRegister.act" method="post" id="form" enctype="multipart/form-data" class="wizard-big">
				<h1>账户</h1>
				<fieldset>
					<div class="row">
						<div class="col-sm-8">
							<div class="form-group">
								<label>用户名 *</label> <input id="nickName" name="nickName"
									type="text" placeholder="请输入用户名" maxlength="20"
									class="form-control required">
							</div>
							<div class="form-group">
								<label>密码 *</label> <input id="password" name="password"
									type="password" maxlength="20" placeholder="请输入密码"
									class="form-control required">
							</div>
							<div class="form-group">
								<label>确认密码 *</label> <input id="confirm" name="confirm"
									type="password" maxlength="20" placeholder="请确认密码"
									class="form-control required">
							</div>
							<div class="form-group">
								<label>手机号码 *</label> <input id="phoneNumber" name="phoneNumber"
									type="number" placeholder="请输入手机号码" maxlength="20"
									class="form-control required">
							</div>
							<div class="form-group">
								<div class="col-sm-6" style="padding: 0;">
									<label>验证码 *</label><br /> <input id="imgCode"
										type="text" placeholder="验证码" maxlength="6"
										class="form-control"
										style="width: 126px; display: inline-block;">
									<img style="cursor: pointer;" title="重新获取" id="randomImg" alt="图片验证码" src="./securityCode.jpg" onclick="getRandomImg()"/>
									<span class="help-block"><i class="fa fa-info-circle"></i> 点击验证码可重新获取</span>
								</div>
								<div class="col-sm-6" style="padding: 0;">
									<label>短信验证码 *</label><br /> <input id="code" name="code"
										type="number" placeholder="短信验证码" maxlength="6"
										class="form-control"
										style="width: 126px; display: inline-block;">
									<button id="getRand"
										style="display: inline; margin-left: 30px;"
										class="btn btn-primary" type="button" onclick="getRandCode()">获取验证码</button>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="text-center" style="margin-top: 30%;">
								<div style="margin-top: 20px">
									<i class="fa fa-sign-in"
										style="font-size: 180px; color: #e5e5e5"></i>
								</div>
							</div>
						</div>
					</div>

				</fieldset>
				<h1>公司资料</h1>
				<fieldset>
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label>公司名称 *</label> <input maxlength="40" id="companyName"
									maxlength="50" name="company.name" type="text"
									class="form-control required">
							</div>
							<div class="form-group">
								<label>法人名称 *</label> <input maxlength="50" id="legalName"
									name="company.legalName" type="text" maxlength="20"
									class="form-control">
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label>法人手机号 *</label> <input id="phone"
									name="company.phone" type="number" maxlength="11"
									class="form-control">
							</div>
							<div class="form-group">
								<label>公司地址 *</label> <input maxlength="80" id="companyAddress"
									name="company.address" type="text" class="form-control">
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label>营业执照 (类型:jpg、bmp、gif、png、jpeg,3M以内)</label> <input id="businessLicense"
									name="businessLicense" type="file" class="form-control">
							</div>
							<div class="form-group">
								<label>环保资质(类型:jpg、bmp、gif、png、jpeg,3M以内)</label> <input id="greenCredential"
									name="greenCredential" type="file" class="form-control">
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<div class="col-sm-12" style="padding-left: 0;">
									<label>建账日期 </label>
								</div>
								<div class="col-sm-12" style="padding-left: 0;">
									<input name="company.accountsDate" class="form-control layer-date"
										placeholder="YYYY-MM-DD"
										onclick="laydate({istime: false, format: 'YYYY-MM-DD'})">
									<label class="laydate-icon"></label>
								</div>
							</div>
						</div>
					</div>
				</fieldset>

				<h1>猪场信息</h1>
				<fieldset>
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label>猪场名称 *</label> <input id="pigFarmName" name="pigFarm.name"
									type="text" class="form-control" placeholder="请输入猪场名称" />
							</div>
							<div class="form-group">
								<label>猪场规模 *</label> <select name="pigFarm.scale"
									class="form-control m-b help-block m-b-none">
									<option value="">请选择猪场规模</option>
									<option value="0">100头以下</option>
									<option value="100">100头-500头</option>
									<option value="500">500头-1000头</option>
									<option value="1000">1000头-2000头</option>
									<option value="2000">2000头以上</option>
								</select>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label>猪场类型 *</label> <select name="pigFarm.type"
									class="form-control m-b help-block m-b-none">
									<option value="">请选择猪场类型</option>
									<option value="0">肥猪场</option>
									<option value="1">母猪场</option>
									<option value="2">自繁自养场</option>
								</select>
							</div>
							<div class="form-group">
								<label>猪场地址 *</label>
								<input type="text" id="test" class="form-control" name="test" style="height:0;width:0;padding:0;margin:0;"/> 
								<div class="form-inline">
									<div data-toggle="distpicker">
										<div class="form-group">
											<select class="form-control"  name="pigFarm.province" id="province1"></select>
										</div>
										<div class="form-group">
											<select class="form-control" name="pigFarm.city" id="city1"></select>
										</div>
										<div class="form-group">
											<select class="form-control" name="pigFarm.area" id="district1"></select>
										</div>
										<div class="form-group">
											<input id="pigFarmAddress"
									name="pigFarm.address" type="text" class="form-control"
									placeholder="猪场详细地址" maxlength="30">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label>责任人</label> <input id="farmPerson" name="pigFarm.chargeMan"
									type="text" class="form-control" placeholder="请输入责任人">
							</div>
							<div class="form-group">
								<label>手机</label> <input maxlength="11" id="pigFarm.phone"
									name="pigFarm.phone" type="number" class="form-control"
									placeholder="请输入手机号" />
							</div>
						</div>
						<!-- 高级功能可以将已经注册的猪场添加到现注册公司下面，但是原来很少用到，就先隐藏 -->
						<div class="col-sm-6" style="display: none;">
							<div class="form-group">
								<button id="" style="margin-top: 25px;" class="btn btn-primary"
									type="button" onclick="options();">高级选项</button>
							</div>
							<div id="optionsDiv" style="display: none;" class="form-group">
								<div class="col-sm-4" style="margin-top: 25px; padding-left: 0;">
									<input maxlength="20" name="fzr" type="text"
										class="form-control" placeholder="猪场负责人姓名" />
								</div>
								<div class="col-sm-4" style="margin-top: 25px; padding-left: 0;">
									<input maxlength="20" name="fzrPhone" type="number"
										class="form-control" placeholder="负责人电话" />
								</div>
								<div class="col-sm-4">
									<button style="margin-top: 25px;" class="btn btn-default"
										type="button" onclick="getRandCode()">查找</button>
								</div>
							</div>
						</div>
						<div class="col-sm-6" style="margin-top: 30px;"
							onselectstart="return false;">
							<div class="form-group checkbox-inline i-checks">
								<input id="acceptTerms" type="checkbox">
								<label for="acceptTerms">我同意<a href="#" target="_blank">注册条款</a>,并保证所填信息真实有效
								</label>
							</div>
						</div>
					</div>
				</fieldset>

				<h1>完成</h1>
				<fieldset>
					<div class="text-center" style="margin-top: 120px">
						<h3 class="logo-name" style="font-size: 60px;">注 册 完 成</h3>
						<h3 class="logo-name" style="font-size: 60px;">等 待 审 核</h3>
					</div>
				</fieldset>
			</form>
		</div>
	</div>
	<%@include file="/WEB-INF/jsp/hadmin/include/validateForm.jsp"%>
	<!-- 一步一步js开始 -->
	<script src="${ctx }/h/js/plugins/staps/jquery.steps.min.js"></script>
	<!-- 下面两个js是防止未输入警告换行 -->
	<script src="${ctx }/h/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${ctx }/h/js/plugins/validate/messages_zh.min.js"></script>
	<script type="text/javascript">
		//验证图片类型
		function verificationImgType(needle, haystack){
			for(var i in haystack) {  
                if(haystack[i] == needle) {  
                    return true;  
                }  
            }
			return false;
		}
	</script>
	<script>
		$(document).ready(function() {
			jQuery.validator.addMethod("address", function (value, element) {
				if($('#province1').val()==''||$('#city1').val()==''||$('#district1').val()==''||$('#pigFarmAddress').val()==''){
					return false;
				}else{
					return true;
				}
			}, "请输入完整的猪场地址");
			
			$("#wizard").steps();
			$("#form").steps({
				bodyTag : "fieldset",
				onStepChanging : function(event, currentIndex, newIndex) {
					//在最前面添加判断，只要注册完成就不能再进行资料修改了
					if (currentIndex === 3) {
						layer.msg('账号已经注册完成，请等待账号审核，谢谢!!!');
						return false;
					}
					
					// Always allow going backward even if the current step contains invalid fields!
					if (currentIndex > newIndex) {
						/* if (newIndex === 0) {
							//此处设置不能返回第一层，防止用户误修改手机号码造成其他影响
							layer.msg('不能返回账户页');
							return false;
						} */
						return true;
					}

					var form = $(this);

					// Clean up if user went backward before
					if (currentIndex < newIndex) {
						// To remove error styles
						$(".body:eq(" + newIndex + ") label.error", form).remove();
						$(".body:eq(" + newIndex + ") .error", form).removeClass("error");
					}

					// Disable validation on fields that are disabled or hidden.
					form.validate().settings.ignore = ":disabled,:hidden";

					var goNext = false;
					if (form.valid()) {
						if (currentIndex === 0 && newIndex === 1) {
							//第一步往第二步跳转之前，判断用户名是否重复，手机号是否重复，短信验证码是否不为空且正确正确
							if ($('#code').val() === '') {
								layer.msg('短信验证码不能为空');
							} else {
								if (verificationBasicInfo()) {
									goNext = true;
								}
							}
						} else if (currentIndex === 1 && newIndex === 2) {
							//上传图片判断是否图片类型
							var rightFileType = new Array('jpg', 'bmp', 'gif', 'png', 'jpeg');
							var businessLicenseStr = $('#businessLicense').val();
							var greenCredentialStr = $('#greenCredential').val();
							var img1=true,img2=true;
							if($('#businessLicense').val() != ""){
								if(!verificationImgType(businessLicenseStr.substring(businessLicenseStr.lastIndexOf('.')+1).toLowerCase(),rightFileType)){
									layer.msg('营业执照请上传图片类型');
									img1=false;
								}
								var fileInput = $("#businessLicense")[0];
						        var byteSize  = fileInput.files[0].fileSize;
						        console.log("byteSize"+byteSize);
							}
							if($('#greenCredential').val() != ""){
								if(!verificationImgType(greenCredentialStr.substring(greenCredentialStr.lastIndexOf('.')+1).toLowerCase(),rightFileType)){
									layer.msg('环保资质请上传图片类型');
									img2=false;
								}
							}
							if(img1&&img2){
								goNext = true;
							}
						}else if (currentIndex === 2 && newIndex === 3) {
							//第三步跳到第四步要判断用户是否勾选了同意注册条款
							if ($('#acceptTerms').is(':checked')) {
								//ajax提交进行注册
								
								var form = $(this);
								form.validate().settings.ignore = ":disabled";
								if(form.valid()){
									var temp = $('#password').val();
									var md5P = $.md5($('#password').val());
									$('#password').val(md5P);
									console.log($('#password').val());
									$('#confirm').removeAttr("name");
									
									console.log("all valid success");
									$('#form').ajaxSubmit({
										async:false,
										"dataType":"json",
										"toastMsg":true,
										onSuccess:function(message){
											$('#password').val(temp);
											$('#confirm').attr("name","confirm");
											goNext = true;
										},
										onFail:function(){
											$('#password').val(temp);
											$('#confirm').attr("name","confirm");
										}
									});
								}
							} else {
								layer.msg('注册条款没有勾选同意');
							}
						} else {
							goNext = true;
						}
					}

					// Start validation; Prevent going forward if false
					return goNext;
				},
				onStepChanged : function(event, currentIndex, priorIndex) {
					console.log(currentIndex+" "+priorIndex);
					//猪场信息到达完成界面执行两秒跳转登陆
					/* if(currentIndex===3&&priorIndex===2){
						 setTimeout(function(){//两秒后跳转  
                             history.back();
                          },2000); 
						 return false;
					} */
					
					// Suppress (skip) "Warning" step if the user is old enough.
					if (currentIndex === 2 && Number($("#age").val()) >= 18) {
						$(this).steps("next");
					}

					// Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
					if (currentIndex === 2 && priorIndex === 3) {
						$(this).steps("previous");
					}
				},
				onFinishing : function(event, currentIndex) {
					if (!(currentIndex == 3)) {
						layer.msg('请在完成页面再点击完成，谢谢!');
						return false;
					}else{
						history.back();
					}
					/* var form = $(this);

					// Disable validation on fields that are disabled.
					// At this point it's recommended to do an overall check (mean ignoring only disabled fields)
					form.validate().settings.ignore = ":disabled";

					// Start validation; Prevent form submission if false
					return form.valid(); */
				},
				onFinished : function(event, currentIndex) {
					/* var form = $(this);

					// Submit form input
					form.submit(); */
				},
				onCanceled:function(event){
					showDialog({
				        title: "您确定取消注册吗",
				        text: "注册所填信息将重新填写，请谨慎操作！",
				        type: "warning",
				        showCancelButton: true,
				        confirmButtonColor: "#DD6B55",
				        closeOnConfirm: false,
				        onConfirm:function(){
				        	history.back();
				        },
				        onCancel:function(){
				        	
				        }
				    });
				}
			}).validate({
				errorPlacement : function(error, element) {
					element.before(error);
				},
				rules : {
					confirm : {
						equalTo : "#password"
					},
					nickName : {
						required : true
					},
					password : {
						maxlength : 20,
						minlength : 6
					},
					"company.name" : {
						required : true
					},
					"company.phone" : {
						required : true,
						minlength : 11,
						maxlength : 11
					},
					"company.address" : {
						required : true
					},
					"pigFarm.name" : {
						required : true
					},
					"pigFarm.type" : {
						required : true
					},
					"pigFarm.scale" : {
						required : true
					},
					"pigFarm.phone" : {
						minlength : 11,
						maxlength : 11
					},
					"company.legalName" : {
						required : true
					},
					test : {
						address:true
					}
				},
				messages : {
					confirm : {
						equalTo : "两次密码不相同"
					},
					password : {
						maxlength : "密码请设置在20长度以内",
						minlength : "密码长度必须大于等于6位"
					},
					"company.name" : {
						required : "请输入公司名称"
					},
					nickName : {
						required : "请输入用户名"
					},
					"company.legalName" : {
						required : "请输入法人名称"
					},
					"company.phone" : {
						required : "请输入手机号",
						minlength : "请输入正确的手机号",
						maxlength : "请输入正确的手机号"
					},
					"pigFarm.name" : {
						required : "请输入猪场名称"
					},
					"pigFarm.type" : {
						required : "请选择猪场类型"
					},
					"pigFarm.scale" : {
						required : "请选择猪场规模"
					},
					"pigFarm.phone" : {
						minlength : "请输入正确的手机号",
						maxlength : "请输入正确的手机号"
					},
					email : "请输入正确的E-mail地址"
				}
			});
		});
	</script>
	<!-- 一步一步js结束 -->
	<script type="text/javascript">
		var clock = '';
		var c = 120;
		function cycTime() {
			c--;
			if (c > 0) {
				$('#getRand').html(c + "秒后可重新获取");
			} else {
				clearInterval(clock);
				$('#getRand').removeAttr("disabled").html("获取验证码");
				c = 120;
			}
		}
		/* 发送验证码方法  */
		function getRandCode() {
			if ($('#phoneNumber').val().length != 11) {
				layer.msg('请输入正确的手机号');
				return;
			}
			//判断图片验证码是否正确
			//$('#getRand').attr("disabled", "disabled");
			$.ajax({
				type : "POST",
				//global:false,
				data : {
					"phoneNumber" : $('#phoneNumber').val(),
					"imgCode" : $('#imgCode').val()
				},
				dateType : "json",
				toastMsg : true,
				url : "<st:getCurrentUrl lastUrl='sendRandomCode.act' />",
				onSuccess : function(json) {
					$('#getRand').attr("disabled", "disabled");
					clock = setInterval(function() {
						$('#getRand').html(c + "秒后可重新获取");
						cycTime();
					}, 1000);
				},
				onFail : function(json) {
					$('#getRand').removeAttr("disabled");
					getRandomImg();
				}
			});
		}
	</script>
	<!-- 此处js实现高级选项的隐藏和显示 -->
	<script type="text/javascript">
		function options() {
			$('#optionsDiv').toggle();
		}
	</script>
	<script src="./h/js/plugins/iCheck/icheck.min.js"
		type="text/javascript"></script>
	<script>
		$(document).ready(function() {
			$(".i-checks").iCheck({
				checkboxClass : "icheckbox_square-green",
				radioClass : "iradio_square-green",
			})
		});

		//ajax提交用户名、手机号码和短信验证码，判断是否重复，验证码是否正确
		function verificationBasicInfo() {
			if ($('#phoneNumber').val().length != 11) {
				layer.msg('请输入正确的手机号');
				return false;
			}
			if ($('#code').val().trim().length < 4) {
				layer.msg('请输入正确的短信验证码');
				return false;
			}
			var isSuccess=false;
			$.ajax({
				type : "POST",
				//global:false,
				async:false,
				data : {
					"nickName" : $('#nickName').val(),
					"phoneNumber" : $('#phoneNumber').val(),
					"code" : $('#code').val()
				},
				dataType : "json",
				url : "<st:getCurrentUrl lastUrl='verificationBasicInfo.act' />",
				onSuccess : function(json) {
					//alert("success");
					console.log("success");
					isSuccess = true;
				},
				error : function(json) {

				}
			});
			return isSuccess;
		}
	</script>
	<!-- 图片验证码的切换功能 -->
	<script type="text/javascript">
		function getRandomImg() {
			var x = Math.ceil(Math.random() * 10);
			$('#randomImg').attr("src", "./securityCode.jpg?" + x);
		}
	</script>
	<!-- 地址三级联动js开始 -->
	<script src="${ctx }/js/linkage/js/distpicker.data.js"></script>
	<script src="${ctx }/js/linkage/js/distpicker.js"></script>
	<script src="${ctx }/js/linkage/js/main.js"></script>
	<!-- 地址三级联动js结束 -->
</body>

</html>
